<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>mydemo</title>
    <style type="text/css">
        body,
        ul,
        li,
        a,
        p {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        li a {
            text-decoration: none;
        }

        p {
            display: none;
        }

        /* 外层盒子样式 */
        #outer {
            width: 500px;
            margin: 10px auto;
        }

        /* 列表样式 */
        #month {
            width: 400px;
            margin: 0 auto;
            background: #d6cdcd;
            padding: 0 0 10px 10px;
            overflow: hidden;
            zoom: 1;
            text-align: center;
        }

        /* li标签样式 */
        #month li {
            width: 68px;
            height: 68px;
            border: 1px solid black;
            margin: 10px 10px 0 0;
            float: left;
            padding: 10px;
            font-size: 25px;
            font-weight: 800;
            color: white;
            background: black;
            cursor: pointer;
        }

        #month li span {
            display: block;
        }

        #month li.liCurrent {
            color: red;
            background: white;
        }

        /* 下层盒子样式 */
        #bottom {
            width: 390px;
            margin: 0 auto;
            border: 10px solid #d6cdcd;
            border-top: 0;
            font-size: 25px;
        }

        #bottom p span {
            font-weight: 800;
        }

        .pCurrent {
            display: block;
            border: 1px solid white;
            background: #867676;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取列表和信息段*/
            var oLi = document.getElementById("month").getElementsByTagName("li");
            var oP = document.getElementsByTagName("p");
            /* 鼠标事件 */
            for (var i = 0; i < oLi.length; i++) {
                oLi[i].index = i;
                oLi[i].onmouseover = function () {
                    /* 列表样式变化 */
                    for (var x in oLi) oLi[x].className = ""
                    this.className = "liCurrent"
                    /*信息段样式变化 */
                    for (var y in oP) oP[y].className = ""
                    oP[this.index].className = "pCurrent"
                }
            }
        }
    </script>

</head>

<body>
    <div id="outer">
        <ul id="month">
            <li><span>1</span>JAN</li>
            <li><span>2</span>FER</li>
            <li><span>3</span>MAR</li>
            <li><span>4</span>APR</li>
            <li><span>5</span>MAY</li>
            <li class="liCurrent"><span>6</span>JUN</li>
            <li><span>7</span>JUL</li>
            <li><span>8</span>AUG</li>
            <li><span>9</span>SEP</li>
            <li><span>10</span>OCT</li>
            <li><span>11</span>NOV</li>
            <li><span>12</span>DEC</li>
        </ul>
        <div id="bottom">
            <p><span>1月节日</span>元旦：1月1日至3日放假三天</p>
            <p><span>2月节日</span>2月2日至8日放假7天。</p>
            <p><span>3月节日</span>妇女节：3月8日妇女节，与我无关。</p>
            <p><span>4月节日</span>清明节：4月3日至5日放假3天</p>
            <p><span>5月节日</span>劳动节：4月30日至5月2日放假3天。</p>
            <p class="pCurrent"><span>6月节日</span>端午节：6月4日至6日放假3天。</p>
            <p><span>7月节日</span>小暑：7月7日小暑。不放假。</p>
            <p><span>8月节日</span>七夕节：8月6日七夕节。不放假。</p>
            <p><span>9月节日</span>中秋节：9月10日至12日放假3天。</p>
            <p><span>10月节日</span>国庆节：10月1日至7日放假7天。</p>
            <p><span>11月节日</span>立冬：11月8日立冬。不放假</p>
            <p><span>12月节日</span>艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。</p>
        </div>
    </div>
</body>

</html>